<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B0000', // 王者红
                        secondary: '#DAA520', // 荣耀金
                        accent: '#FFD700', // 金色强调
                        dark: '#1A0F0B', // 深色背景
                        light: '#F9F2E8' // 浅色文本
                    },
                    fontFamily: {
                        sans: ['Microsoft YaHei', 'SimHei', 'sans-serif'],
                        serif: ['"Ma Shan Zheng"', 'STKaiti', 'serif']
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.5);
            }
            .gold-gradient {
                background: linear-gradient(135deg, #D4AF37 0%, #F9F292 50%, #D4AF37 100%);
            }
            .red-gradient {
                background: linear-gradient(135deg, #8B0000 0%, #CD5C5C 50%, #8B0000 100%);
            }
        }
    </style>
    
    <!-- 中文字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light font-sans overflow-x-hidden">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between bg-dark/80 bg-blur">
            <!-- Logo -->
            <a href="#" class="flex items-center">
                <span class="text-2xl font-fantasy font-bold text-accent">World of Warcraft</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-1">
                <?php foreach ($t['nav'] as $item): ?>
                    <a 
                        href="<?php echo $item['link']; ?>" 
                        class="px-4 py-2 rounded hover:bg-primary/30 transition-colors duration-300 <?php echo isset($item['isCta']) ? 'bg-secondary hover:bg-secondary/80 text-white font-bold' : ''; ?>"
                    >
                        <?php echo $item['name']; ?>
                    </a>
                <?php endforeach; ?>
                
                <!-- 语言选择器 -->
                <div class="ml-4 relative group">
                    <button class="flex items-center px-3 py-2 rounded bg-dark/50 hover:bg-primary/30 transition-colors">
                        <i class="fa fa-globe mr-2"></i>
                        <span><?php echo $t['lang'][$lang]; ?></span>
                        <i class="fa fa-chevron-down ml-2 text-xs"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-36 bg-dark/90 rounded shadow-lg py-2 hidden group-hover:block z-50">
                        <?php foreach ($availableLangs as $l): ?>
                            <?php if ($l != $lang): ?>
                                <a 
                                    href="?lang=<?php echo $l; ?>" 
                                    class="block px-4 py-2 hover:bg-primary/30 transition-colors"
                                >
                                    <?php echo $t['lang'][$l]; ?>
                                </a>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden bg-dark/95 hidden">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-2">
                <?php foreach ($t['nav'] as $item): ?>
                    <a 
                        href="<?php echo $item['link']; ?>" 
                        class="px-4 py-2 rounded hover:bg-primary/30 transition-colors duration-300 <?php echo isset($item['isCta']) ? 'bg-secondary hover:bg-secondary/80 text-white font-bold' : ''; ?>"
                    >
                        <?php echo $item['name']; ?>
                    </a>
                <?php endforeach; ?>
                
                <!-- 移动端语言选择器 -->
                <div class="pt-2 border-t border-gray-700">
                    <p class="px-4 mb-2 text-sm text-gray-400">语言 / Language</p>
                    <div class="grid grid-cols-2 gap-2 px-4">
                        <?php foreach ($availableLangs as $l): ?>
                            <a 
                                href="?lang=<?php echo $l; ?>" 
                                class="py-2 text-center rounded hover:bg-primary/30 transition-colors <?php echo $l == $lang ? 'bg-primary/30' : ''; ?>"
                            >
                                <?php echo $t['lang'][$l]; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
        <!-- 背景图 -->
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/100/1920/1080" alt="魔兽世界背景图" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-b from-dark/60 via-dark/40 to-dark"></div>
        </div>
        
        <!-- 内容 -->
        <div class="container mx-auto px-4 z-10 text-center">
            <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-fantasy font-bold leading-tight text-shadow-lg mb-6">
                <?php echo $t['hero']['title']; ?>
            </h1>
            <p class="text-[clamp(1rem,3vw,1.5rem)] max-w-3xl mx-auto text-shadow mb-10">
                <?php echo $t['hero']['subtitle']; ?>
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4 mb-10">
                <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="px-8 py-3 bg-secondary hover:bg-secondary/80 text-white font-bold rounded transition-all transform hover:scale-105">
                    <?php echo $t['hero']['cta1']['text']; ?>
                </a>
                <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="px-8 py-3 bg-transparent border-2 border-light hover:bg-light/10 text-white font-bold rounded transition-all flex items-center justify-center gap-2">
                    <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i>
                    <?php echo $t['hero']['cta2']['text']; ?>
                </a>
            </div>
            <div class="inline-block px-6 py-2 bg-dark/70 rounded-full text-accent font-semibold">
                <?php echo $t['hero']['version']; ?>
            </div>
        </div>
        
        <!-- 向下滚动指示 -->
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
            <a href="#features" class="text-light/70 hover:text-light text-2xl">
                <i class="fa fa-chevron-down"></i>
            </a>
        </div>
    </section>

    <!-- 游戏特色 -->
    <section id="features" class="py-20 bg-gradient-to-b from-dark to-primary/30">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-accent uppercase tracking-wider mb-2"><?php echo $t['features']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['features']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['features']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach ($t['features']['items'] as $item): ?>
                    <div class="bg-dark/50 rounded-lg p-6 border border-gray-800 hover:border-accent/50 transition-all transform hover:-translate-y-1">
                        <div class="text-accent text-3xl mb-4">
                            <i class="fa <?php echo $item['icon']; ?>"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3"><?php echo $item['title']; ?></h3>
                        <p class="text-light/70"><?php echo $item['desc']; ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- 种族与职业 -->
    <section id="characters" class="py-20 bg-dark">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-accent uppercase tracking-wider mb-2"><?php echo $t['characters']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['characters']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['characters']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach ($t['characters']['items'] as $item): ?>
                    <div class="bg-dark/50 rounded-lg overflow-hidden border border-gray-800 card-hover">
                        <div class="h-64 overflow-hidden">
                            <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                        </div>
                        <div class="p-6">
                            <div class="text-sm text-accent mb-1"><?php echo $item['class']; ?></div>
                            <h3 class="text-xl font-bold mb-3"><?php echo $item['name']; ?></h3>
                            <p class="text-light/70 mb-4"><?php echo $item['desc']; ?></p>
                            <a href="#" class="inline-flex items-center text-accent hover:text-accent/80 transition-colors">
                                <?php echo $t['readMore']; ?>
                                <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center px-6 py-3 border border-accent text-accent hover:bg-accent hover:text-dark rounded transition-colors">
                    <?php echo $t['characters']['moreLink']; ?>
                    <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 游戏截图 -->
    <section id="screenshots" class="py-20 bg-gradient-to-b from-dark to-primary/20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-accent uppercase tracking-wider mb-2"><?php echo $t['screenshots']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['screenshots']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['screenshots']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <?php foreach ($t['screenshots']['items'] as $item): ?>
                    <div class="group relative overflow-hidden rounded-lg cursor-pointer">
                        <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-primary/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <i class="fa fa-search-plus text-4xl text-white"></i>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center px-6 py-3 border border-accent text-accent hover:bg-accent hover:text-dark rounded transition-colors">
                    <?php echo $t['screenshots']['moreLink']; ?>
                    <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 宣传视频 -->
    <section id="trailer" class="py-20 bg-dark relative overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <img src="https://picsum.photos/id/42/1920/1080" alt="" class="w-full h-full object-cover">
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-12">
                <p class="text-accent uppercase tracking-wider mb-2"><?php echo $t['trailer']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['trailer']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['trailer']['subtitle']; ?></p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="relative rounded-lg overflow-hidden group cursor-pointer">
                    <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full aspect-video object-cover">
                    <div class="absolute inset-0 bg-primary/30 flex items-center justify-center">
                        <div class="w-20 h-20 rounded-full bg-secondary flex items-center justify-center transform transition-transform group-hover:scale-110">
                            <i class="fa fa-play text-2xl ml-1"></i>
                        </div>
                    </div>
                    <div class="absolute bottom-4 right-4 bg-dark/80 px-3 py-1 rounded-full text-sm">
                        <i class="fa fa-clock-o mr-1"></i> <?php echo $t['trailer']['duration']; ?>
                    </div>
                    <div class="absolute bottom-4 left-4 bg-dark/80 px-3 py-1 rounded-full text-sm">
                        <i class="fa fa-calendar mr-1"></i> <?php echo $t['trailer']['released']; ?>
                    </div>
                </div>
                
                <div class="text-center mt-8">
                    <a href="#" class="text-accent hover:text-accent/80 transition-colors inline-flex items-center">
                        <?php echo $t['trailer']['moreLink']; ?>
                        <i class="fa fa-external-link ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 游戏下载 -->
    <?php if(isset($t['download'])){?>
    <section id="download" class="py-20 bg-gradient-to-b from-primary/20 to-dark">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-accent uppercase tracking-wider mb-2"><?php echo $t['download']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['download']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['download']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                <!-- 下载客户端 -->
                <div class="lg:col-span-1">
                    <div class="bg-dark/60 rounded-lg p-6 border border-gray-800 h-full">
                        <div class="space-y-6">
                            <?php foreach ($t['download']['clients'] as $client): ?>
                                <div class="p-4 bg-dark/40 rounded-lg">
                                    <div class="flex items-center mb-4">
                                        <div class="w-12 h-12 rounded-full bg-primary/30 flex items-center justify-center mr-4">
                                            <i class="fa <?php echo $client['icon']; ?> text-2xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold"><?php echo $client['os']; ?></h4>
                                            <p class="text-sm text-light/60"><?php echo $client['size']; ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex flex-wrap gap-3">
                                        <a href="<?php echo $client['downloadLink']; ?>" class="px-4 py-2 bg-secondary hover:bg-secondary/80 rounded transition-colors">
                                            <?php echo $client['buttonText']; ?>
                                        </a>
                                        
                                        <?php if (isset($client['secondButton'])): ?>
                                            <a href="<?php echo $client['secondButton']['link']; ?>" class="px-4 py-2 bg-primary hover:bg-primary/80 rounded transition-colors">
                                                <?php echo $client['secondButton']['text']; ?>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <div class="mt-8 pt-6 border-t border-gray-800">
                            <h4 class="font-bold mb-3"><?php echo _t('download_notice');?></h4>
                            <ul class="space-y-2 text-light/80">
                                <?php foreach ($t['download']['notes'] as $note): ?>
                                    <li class="flex items-start">
                                        <i class="fa fa-info-circle text-accent mt-1 mr-2"></i>
                                        <span><?php echo $note; ?></span>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 系统要求 -->
                <div class="lg:col-span-2">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-dark/60 rounded-lg p-6 border border-gray-800">
                            <h3 class="text-xl font-bold mb-6 text-accent"><?php echo $t['download']['requirements']['minimum']['title']; ?></h3>
                            
                            <ul class="space-y-4">
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-desktop mr-2"></i> <?php echo _t('download_os'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['minimum']['os']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-microchip mr-2"></i> <?php echo _t('download_processor'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['minimum']['processor']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-memory mr-2"></i> <?php echo _t('download_memory'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['minimum']['memory']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-picture-o mr-2"></i> <?php echo _t('download_graphics'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['minimum']['graphics']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-hdd-o mr-2"></i> <?php echo _t('download_storage'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['minimum']['storage']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-wifi mr-2"></i> <?php echo _t('download_internet'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['minimum']['internet']; ?></div>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="bg-dark/60 rounded-lg p-6 border border-gray-800 border-accent/30">
                            <h3 class="text-xl font-bold mb-6 text-accent"><?php echo $t['download']['requirements']['recommended']['title']; ?></h3>
                            
                            <ul class="space-y-4">
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-desktop mr-2"></i> <?php echo _t('download_os'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['recommended']['os']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-microchip mr-2"></i> <?php echo _t('download_processor'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['recommended']['processor']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-memory mr-2"></i> <?php echo _t('download_memory'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['recommended']['memory']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-picture-o mr-2"></i> <?php echo _t('download_graphics'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['recommended']['graphics']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-hdd-o mr-2"></i> <?php echo _t('download_storage'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['recommended']['storage']; ?></div>
                                </li>
                                <li class="flex">
                                    <div class="w-24 text-light/60">
                                        <i class="fa fa-wifi mr-2"></i> <?php echo _t('download_internet'); ?>
                                    </div>
                                    <div><?php echo $t['download']['requirements']['recommended']['internet']; ?></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <?php }?>
    <!-- 社区论坛 -->
    <section id="forum" class="py-20 bg-dark">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['forum']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['forum']['subtitle']; ?></p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="bg-dark/60 rounded-lg overflow-hidden border border-gray-800">
                    <div class="grid grid-cols-12 bg-primary/20 p-4 text-sm font-bold">
                        <div class="col-span-6 md:col-span-7"><?php echo _t('forum_name');?></div>
                        <div class="col-span-3 hidden md:block"><?php echo _t('forum_count');?></div>
                        <div class="col-span-3 md:col-span-2"><?php echo _t('forum_lat_post');?></div>
                    </div>
                    
                    <div class="divide-y divide-gray-800">
                        <?php foreach ($t['forum']['topics'] as $topic): ?>
                            <div class="grid grid-cols-12 p-4 hover:bg-primary/10 transition-colors">
                                <div class="col-span-6 md:col-span-7">
                                    <a href="#" class="font-bold hover:text-accent transition-colors">
                                        <?php echo $topic['name']; ?>
                                    </a>
                                </div>
                                <div class="col-span-3 hidden md:flex items-center justify-center">
                                    <span class="px-2 py-1 bg-dark rounded-full text-sm">
                                        <?php echo $topic['count']; ?>
                                    </span>
                                </div>
                                <div class="col-span-3 md:col-span-2 flex items-center justify-center md:justify-end text-light/70">
                                    <?php echo $topic['lastPost']; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <div class="text-center mt-10">
                    <a href="#" class="px-8 py-3 bg-secondary hover:bg-secondary/80 text-white font-bold rounded transition-all transform hover:scale-105 inline-block">
                        <?php echo $t['forum']['cta']; ?>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 最新动态 -->
    <section id="news" class="py-20 bg-gradient-to-b from-dark to-primary/30">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-accent uppercase tracking-wider mb-2"><?php echo $t['news']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['news']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['news']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php foreach ($t['news']['items'] as $item): ?>
                    <div class="bg-dark/50 rounded-lg overflow-hidden border border-gray-800 card-hover">
                        <div class="h-48 overflow-hidden">
                            <img src="<?php echo $item['image']; ?>" alt="" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                        </div>
                        <div class="p-6">
                            <div class="flex items-center text-sm text-light/60 mb-3">
                                <span class="bg-primary/30 px-2 py-1 rounded mr-3"><?php echo $item['category']; ?></span>
                                <span><i class="fa fa-calendar-o mr-1"></i> <?php echo $item['date']; ?></span>
                            </div>
                            <h3 class="text-xl font-bold mb-3"><?php echo $item['title']; ?></h3>
                            <p class="text-light/70 mb-4"><?php echo $item['desc']; ?></p>
                            <a href="#" class="inline-flex items-center text-accent hover:text-accent/80 transition-colors">
                                <?php echo $t['readMore']; ?>
                                <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center px-6 py-3 border border-accent text-accent hover:bg-accent hover:text-dark rounded transition-colors">
                    <?php echo $t['news']['moreLink']; ?>
                    <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 购买区域 -->
    <?php if(isset($t['purchase'])){?>
    <section id="purchase" class="py-20 bg-dark relative overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <img src="https://picsum.photos/id/60/1920/1080" alt="魔兽世界购买背景" class="w-full h-full object-cover">
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-fantasy font-bold mb-4"><?php echo $t['purchase']['title']; ?></h2>
                <p class="max-w-2xl mx-auto text-light/80"><?php echo $t['purchase']['subtitle']; ?></p>
            </div>
            
            <!-- 版本选择 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
                <?php foreach ($t['purchase']['versions'] as $version): ?>
                    <div class="bg-dark/70 rounded-lg overflow-hidden border border-gray-800 transition-all transform hover:-translate-y-2 hover:shadow-xl <?php echo isset($version['featured']) ? 'border-accent/50 relative scale-105 z-10' : ''; ?>">
                        <?php if (isset($version['featured'])): ?>
                            <div class="bg-accent text-dark text-center py-1 font-bold text-sm">
                                推荐选择
                            </div>
                        <?php endif; ?>
                        
                        <div class="p-8">
                            <h3 class="text-xl font-bold mb-4"><?php echo $version['name']; ?></h3>
                            <div class="text-3xl font-bold mb-6 text-accent">
                                <?php echo $version['price']; ?>
                            </div>
                            
                            <ul class="space-y-3 mb-8">
                                <?php foreach ($version['includes'] as $item): ?>
                                    <li class="flex items-start">
                                        <i class="fa fa-check text-green-400 mt-1 mr-3"></i>
                                        <span><?php echo $item; ?></span>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                            
                            <a href="#" class="block w-full py-3 text-center bg-secondary hover:bg-secondary/80 text-white font-bold rounded transition-colors">
                                <?php echo $version['cta']; ?>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <!-- 游戏时间购买 -->
            <div>
                <h3 class="text-2xl font-fantasy font-bold text-center mb-10"><?php echo $t['purchase']['gameTime']['title']; ?></h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-3xl mx-auto">
                    <?php foreach ($t['purchase']['gameTime']['options'] as $option): ?>
                        <div class="bg-dark/60 rounded-lg p-6 border border-gray-800 text-center hover:border-accent/50 transition-all">
                            <div class="text-2xl font-bold mb-2"><?php echo $option['duration']; ?></div>
                            <div class="text-xl text-accent font-bold mb-6"><?php echo $option['price']; ?></div>
                            <a href="#" class="inline-block px-6 py-2 bg-primary hover:bg-primary/80 rounded transition-colors">
                                <?php echo $option['cta']; ?>
                            </a>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>
    <?php }?>
    
    <!-- 页脚 -->
    <footer class="bg-dark border-t border-gray-800 pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-16">
                <div class="md:col-span-1">
                    <h3 class="text-2xl font-fantasy font-bold text-accent mb-4">World of Warcraft</h3>
                    <p class="text-light/70 mb-6"><?php echo $t['footer']['description']; ?></p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-light/70 hover:text-accent transition-colors text-xl">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-light/70 hover:text-accent transition-colors text-xl">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-light/70 hover:text-accent transition-colors text-xl">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-light/70 hover:text-accent transition-colors text-xl">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>
                
                <div class="md:col-span-2">
                    <h4 class="text-lg font-bold mb-4"><?php echo $t['footer']['subscribe']; ?></h4>
                    <p class="text-light/70 mb-4"><?php echo $t['footer']['subscribeDesc']; ?></p>
                    <form class="flex flex-col sm:flex-row gap-2 mb-4">
                        <input 
                            type="email" 
                            placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" 
                            class="flex-grow px-4 py-2 bg-dark/50 border border-gray-700 rounded focus:outline-none focus:border-accent"
                            required
                        >
                        <button type="submit" class="px-4 py-2 bg-accent text-dark font-bold rounded hover:bg-accent/80 transition-colors">
                            <?php echo $t['footer']['subscribe']; ?>
                        </button>
                    </form>
                    <p class="text-xs text-light/50"><?php echo $t['footer']['privacyNote']; ?></p>
                </div>
                
                <div>
                    <?php foreach ($t['footer']['links'] as $linkGroup): ?>
                        <h4 class="text-lg font-bold mb-4"><?php echo $linkGroup['title']; ?></h4>
                        <ul class="space-y-2">
                            <?php foreach ($linkGroup['items'] as $item): ?>
                                <li>
                                    <a href="<?php echo $item['link']; ?>" class="text-light/70 hover:text-accent transition-colors">
                                        <?php echo $item['name']; ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endforeach; ?>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-light/50 text-sm mb-4 md:mb-0">
                        <?php echo $t['footer']['copyright']; ?>
                    </p>
                    <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
                        <?php foreach ($t['footer']['legalLinks'] as $item): ?>
                            <a href="<?php echo $item['link']; ?>" class="text-light/50 hover:text-accent transition-colors">
                                <?php echo $item['name']; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-accent/80 hover:bg-accent text-dark w-12 h-12 rounded-full flex items-center justify-center text-xl shadow-lg transition-all opacity-0 invisible">
        <i class="fa fa-chevron-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            const backToTop = document.getElementById('back-to-top');
            
            // 导航栏样式变化
            if (window.scrollY > 50) {
                navbar.classList.add('bg-dark/95', 'shadow-lg', 'py-2');
                navbar.classList.remove('py-3');
            } else {
                navbar.classList.remove('bg-dark/95', 'shadow-lg', 'py-2');
                navbar.classList.add('py-3');
            }
            
            // 返回顶部按钮显示/隐藏
            if (window.scrollY > 500) {
                backToTop.classList.remove('opacity-0', 'invisible');
                backToTop.classList.add('opacity-100', 'visible');
            } else {
                backToTop.classList.add('opacity-0', 'invisible');
                backToTop.classList.remove('opacity-100', 'visible');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    // 关闭移动菜单（如果打开）
                    document.getElementById('mobile-menu').classList.add('hidden');
                    
                    // 滚动到目标位置
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 返回顶部功能
        document.getElementById('back-to-top').addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 图片加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('img');
            images.forEach(img => {
                img.classList.add('opacity-0', 'transition-opacity', 'duration-700');
                img.onload = function() {
                    this.classList.remove('opacity-0');
                    this.classList.add('opacity-100');
                }
                // 如果图片已经缓存
                if (img.complete) {
                    img.classList.remove('opacity-0');
                    img.classList.add('opacity-100');
                }
            });
        });
    </script>
</body>
</html>
